<template>
	<view>
		<view class="metro_query_box">
			<view class="currentName"><view>当前站点:{{currentName}}</view><image @click="go_overview" mode="heightFix" src="../../static/metro/all_line.png"></image></view>
			<view class="body" v-for="item in data">
				<view class="line" @click="go_line(item.lineId,item.currentName)">
					<view class="lineName">{{item.lineName}}</view>
					<view class="metro_station">
						<view class="preStep">{{item.preStep.name}}</view>
						<view class="now">{{item.currentName}}</view>
						<view class="nextStep">{{item.nextStep.name}}</view>
					</view>
					<view class="station_line">
						<view></view>
						<view></view>
						<view></view>
					</view>
					<view class="reachTime">还有:{{item.reachTime}}分钟到站</view>
				</view>
				<view class="separator" v-if="item != data[data.length-1]">
				</view>
				<view class="bottom" v-else>
					已经到底了
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '../../utils/request'
	export default {
		data() {
			return {
				currentName: "建国门",
				data: []
			}
		},
		onShow() {
			let that = this;
			http({
				url: "/prod-api/api/metro/list",
				data: {
					currentName: that.currentName
				}
			}).then((res) => {
				that.data = res.data.data
			}).catch((err) => {
				console.log(err);
			})
		},
		methods: {
			go_line(lineId,currentName) {
				uni.navigateTo({
					url:"/pages/metro_query/station_line?lineId="+lineId+"&currentName="+currentName
				})
			},
			go_overview(){
				uni.navigateTo({
					url:"/pages/metro_query/Overview"
				})
			}
		}
	}
</script>

<style>
	.metro_query_box {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: 0 auto;
	}

	.currentName {
		width: 100%;
		font-size: 1.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.currentName image{
		height:60rpx;
	}
	.body {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.line {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ecf0f1;
		border-radius: 30rpx;
		box-sizing: border-box;
	}

	.metro_station {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.metro_station>view {
		flex: 1;
		text-align: center;
	}

	.station_line>view {
		display: block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 20px;
		transform: translateY(-10rpx);
		background-color: red;
	}

	.station_line {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		height: 20rpx;
		background-color: orange;
		border-radius: 20px;
	}

	.separator {
		width: 95%;
		border-bottom: 8rpx dashed black;
		margin: 50rpx 0;
	}

	.bottom {
		text-align: center;
		margin-top: 50rpx;
	}
</style>
